<template>
	<view>
		<view class="border-bottom border-light-secondary" style="margin-top: 100rpx;">
			<text class="iconfont icon-fanhui" style="font-size: 50rpx;padding-left: 20rpx;" @click="back"></text>
			<text style="padding-left: 260rpx; padding-right: 220rpx;">消息列表</text>
			<text class="iconfont icon-caidan"style="font-size: 50rpx;" @click="caidan"></text>
		</view>
		<!-- 头部 -->
		<view class="flex align-center p-3 border-bottom border-light-secondary">
			<image src="@/static/tabber/default.jpg " 
			style="width: 180rpx;height: 180rpx;"
			class="rounded-circle"></image>
			<view class="pl-3 flex flex-column flex-1">
				<view class="flex align-center">
					<view class="flex-1 flex  flex-column align-center justify-center" >
						<text class="font-lg font-weight-bold">1</text>
						<text class="font text-muted">粉丝</text>
					</view>
					<view class="flex-1 flex  flex-column align-center justify-center" >
						<text class="font-lg font-weight-bold">1</text>
						<text class="font text-muted">粉丝</text>
					</view>
					<view class="flex-1 flex  flex-column align-center justify-center" >
						<text class="font-lg font-weight-bold">1</text>
						<text class="font text-muted">粉丝</text>
					</view>
				</view>
				<view class="flex justify-center align-center">
					
					<button type="primary" size="mini" class="bg-main " style="width: 400rpx;">关注</button>
				</view>
			</view>
		</view>
		
		<!-- tab -->
		<view class="flex align-center" style="height: 100rpx;">
			<view class="flex-1 flex align-center justify-center"
			v-for="(item,index) in tabBars" :key="index"
			:class="index === tabIndex ? 'font-lg font-weight-bold text-main':'font-md'"
			@click="changeTab(index)">
			{{item.name}}</view>
		</view>
		
		
		<template v-if="tabIndex === 0">
			<view class="animate__animated animate__fast animate__fadeIn">
				<view class="p-3 border-bottom">
					<view class="font-md">账号信息</view>
					<view class="font">账号年龄：12个月</view>
					<view class="font">账号id：1</view>
				</view>
				<view class="p-3 border-bottom">
					<view class="font-md">个人信息</view>
					<view class="font">星座：{{userinfo.birthday}}</view>
					<view class="font">职业：{{userinfo.job}}</view>
					<view class="font">故乡：{{userinfo.path}}</view>
					<view class="font">情感：{{userinfo.qg}}</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="animate__animated animate__fast animate__fadeIn">
				<common-list v-for="(item,index) in list" :key="index" :item="item" :index="index" @follow="follow" @dosupport="dosupport"></common-list>
				<divider></divider>
				<load-more :loadmore="loadmore"></load-more>
			</view>
		</template>
		
		
		<!-- 弹出层 -->
		<uni-popup ref="popup" type="bottom">
			<view class="flex align-center justify-center font-md border-bottom py-2" hover-class="bg-light" >
				<text class="iconfont icon-删除 mr-2"></text> 
				加入黑名单
			</view>
			<view class="flex align-center justify-center font-md py-2" hover-class="bg-light" >
				<text class="iconfont icon-haoyou mr-2"></text> 聊天
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import commonList from '@/components/common/common-list.vue';
	import loadMore from '@/components/common/load-more.vue';
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	import $T from '@/common/time.js';
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue';
	const demo=[{
									username:"昵称",
									userpic:"@/static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/12.jpg",
									support:{
										type:"unsupport",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"@/static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"",
									support:{
										type:"support",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"@/static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/15.jpg",
									support:{
										type:"",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"@/static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/13.jpg",
									support:{
										type:"support",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								}]
	export default {
		components: {
			commonList,
			loadMore,
			uniPopup,
			uniNavBar
		},
		data() {
			return {
				tabIndex:0,
				tabBars:[{
					name:"主页",
				},{
					name:"帖子",
					list:demo,
					// 1.上拉加载更多  2.加载中... 3.没有更多了
					loadmore:"上拉加载更多",
					page:1
				},{
					name:"动态",
					list:demo,
					// 1.上拉加载更多  2.加载中... 3.没有更多了
					loadmore:"上拉加载更多",
					page:1
				}],
			}
		},
		computed:{
			list(){
				return this.tabBars[this.tabIndex].list
			},
			loadmore(){
				return this.tabBars[this.tabIndex].loadmore
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			caidan(e){
				this.$refs.popup.open()
			},
			changeTab(index){
				this.tabIndex = index
				//this.getList()
			},
			// 关注
			  follow(e){
				  //console.log(this.newsList[e].isFollow)
				 let list=this.tabBars[this.tabIndex].list
				 list[e].isFollow=true
				  uni.showToast({
				  	title:"关注成功",
				  })
			  },
			  //顶踩
			  dosupport(e){
				  let list = this.tabBars[this.tabIndex].list
				  let item=list[e.index]
				  let msg = e.type==='support'?'顶':'踩'
				  //之前没操作过
				  if(item.support.type==='')
				  {
				  item.support.type=e.type
				  item.support[e.type+'_count']++
				  }
				  else if(item.support.type==='support' && e.type==='unsupport')
				  {
					  item.support.support_count--;
					  item.support.unsupport_count++;
				  }
				  else if(item.support.type==='unsupport'&& e.type==='support')
				  {
					  item.support.support_count++;
					  item.support.unsupport_count--;
				  }
				  item.support.type=e.type
				 uni.showToast({
					 title:msg
					 
				 })
				 
			  },
		}
	}
</script>

<style>

</style>
